<template>
  <div class="form-overlay" :class="{ 'light-theme': isLightTheme }">
    <div class="form-container">
      <h3>新建课程</h3>
      
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label>课程名称</label>
          <input
            v-model="formData.name"
            required
          >
        </div>
        
        <div class="form-group">
          <label>课程描述</label>
          <textarea v-model="formData.description" />
        </div>
        
        <div class="form-group">
          <label>学科分类</label>
          <select
            v-model="formData.subject"
            required
          >
            <option value="数学">
              数学
            </option>
            <option value="语文">
              语文
            </option>
            <option value="英语">
              英语
            </option>
          </select>
        </div>
        
        <div class="form-group">
          <label>适用年级</label>
          <select
            v-model="formData.grade"
            required
          >
            <option value="一年级">
              一年级
            </option>
            <option value="二年级">
              二年级
            </option>
            <option value="三年级">
              三年级
            </option>
          </select>
        </div>
        
        <div class="form-actions">
          <button
            type="submit"
            class="submit-btn"
          >
            保存
          </button>
          <button
            type="button"
            class="cancel-btn"
            @click="$emit('cancel')"
          >
            取消
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable no-undef */
import { ref, onMounted, onUnmounted } from 'vue'
const emit = defineEmits(['save', 'cancel'])

const isLightTheme = ref(false)
const formData = ref({
  name: '',
  description: '',
  subject: '', 
  grade: ''
})

const handleThemeChange = (isLight) => {
  isLightTheme.value = isLight
}

onMounted(() => {
  window.addEventListener('theme-change', (e) => {
    handleThemeChange(e.detail)
  })
})

onUnmounted(() => {
  window.removeEventListener('theme-change', handleThemeChange)
})

const handleSubmit = () => {
  console.log('表单数据:', formData.value)
  emit('save', formData.value)
}
</script>

<style scoped>
.form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 深色主题样式 */
.form-container {
  background: #333;
  padding: 2rem;
  border-radius: 8px;
  width: 500px;
}

.form-group label {
  color: #ccc;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: #444;
  border: 1px solid #555;
  color: white;
}

/* 浅色主题样式 */
.light-theme .form-container {
  background: #f1f8ff;
}

.light-theme .form-group label {
  color: #495057;
}

.light-theme .form-group input,
.light-theme .form-group textarea,
.light-theme .form-group select {
  background: #fff;
  border: 1px solid #ced4da;
  color: #495057;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ccc;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.5rem;
  background: #444;
  border: 1px solid #555;
  color: white;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.submit-btn {
  background: #8b5cf6;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn {
  background: #555;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>